import 'package:flutter/material.dart';
// import 'package:photo_view/photo_view.dart';  // 预览单张图片
import 'package:photo_view/photo_view_gallery.dart'; // 预览多张图片

class HeroPage extends StatefulWidget {
  final Map arguments;
  const HeroPage({super.key, required this.arguments});

  @override
  State<HeroPage> createState() => _HeroPageState();
}


/* 
hero动画
- 不使用任何插件
  - 只有飞入飞出效果 不能双击和手指放大缩小
- PhotoView 插件
  - 单张预览 可以 双击 和手指放大缩小
- PhotoViewGallery 插件
  - 预览多张
    - onPageChanged 图片滑动触发的方法
    - initialPage 初始化显示图片
    - itemCount  预览图片张数
 */




class _HeroPageState extends State<HeroPage> {
  late List listData = [];
  late int currentPage = 0;

  @override
  void initState() {
    super.initState();
    listData = widget.arguments["listData"];
    currentPage = widget.arguments["initialPage"];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Title'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Hero(
            tag: widget.arguments["imageUrl"],
            child: Stack(
              children: [
                Scaffold(
                  backgroundColor: Colors.black,
                  body: Center(
                      child: PhotoViewGallery.builder(
                          itemCount: listData.length,
                          pageController: PageController(
                              initialPage: currentPage), // 初始化显示的图片的索引
                          // 图片滑动触发的方法
                          onPageChanged: (index) {
                            print(index);
                            setState(() {
                              currentPage = index;
                            });
                          },
                          builder: ((context, index) {
                            return PhotoViewGalleryPageOptions(
                                imageProvider:
                                    NetworkImage(listData[index]["imageUrl"]));
                          }))
                      // 使用 PhotoView 可以实现放大缩小
                      // 局限 只能预览单张
                      // PhotoView(
                      //   imageProvider: NetworkImage(widget.arguments["imageUrl"]),
                      // ),
                      ),
                ),
                Positioned(
                    left: 0,
                    right: 0,
                    bottom: 20,
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                        "${currentPage + 1} / ${listData.length}",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 14,
                            decoration: TextDecoration.none),
                      ),
                    ))
              ],
            )),
      ),
    );
  }
}
